@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700)
$sans: 'Ubuntu', sans-serif

$c1: #66aaff
$c1dm: #445588
$c1d: #223355
$c1dd: #001133
$c1lm: #bdcedf
$c1l: #ddeeff
$c1ll: #fcfdff

$c2: #8a8c8f
$c2d: #8a8c8f
$c2l: #eaecef
$c2lm: #cddeef
$c2ll: #cacccf

$ce: #ff6633

$bradius: 6px
$sradius: 4px
$width: 1000px
$footerh: 60px
$headerh: 132px
$gap: 12px
$gap2: 6px
$cat: 150px
$tfs: 16px
$tgap: 3px

*
  margin: 0

html, body
  height: 100%
  min-width: 1000px

body
  background-color: $c1ll
  font:
    family: $sans

.hide
  display: none

h1, h2, h3, h4
  color: $c1dd

a
  color: $c1d
  text-decoration: none
  &:hover
    color: $c1dd
    text:
      shadow: 0px 0px 1px rgba($c1d, 0.6)

input, button, textarea, select
  outline: none
  font:
    family: $sans
    size: 14px
  border: solid 1px $c2ll
    radius: $sradius
  padding: 2px
    left: 6px
    right: 6px
  background: rgba($c1ll, 0.8)
  &:hover, &:active, &:focus
    border:
      color: $c1 !important
  //font:
  //  size: 14px
input[type=text], input[type=search], input[type=password], input[type=number], textarea, select
  padding: 4px
    left: 2px
    right: 2px
  &:focus
    border:
      color: $c1 !important
    box-shadow: 0px 0px 4px 2px $c1
    background: rgba($c1, 0.2) !important
  width: 200px
textarea
  height: 80px

=placeholder
  color: $c2
input:-moz-placeholder
  +placeholder
input::-webkit-input-placeholder
  +placeholder

fieldset
  border: none
  text-align: left
  small
    display: block
    width: 100%
    text-align: center
  &.error
    small
      color: $ce

legend
  padding: 4px

label
  display: block
  clear: both
  float: left
  padding: 4px
  text-align: right

header
  padding:
    top: $gap2
    bottom: $gap2
  height: $headerh - 2 * $gap2
  background-color: $c1l
  border-bottom: solid $c1lm 1px
  img
    //display: inline
    float: left
  h1, h2
    padding:
      top: 16px

#logo
  img
    border: none
    outline: none

.title
  text-align: center
  margin: 0 92px 0

.clear
  clear: both

.container
  margin:
    right: auto
    left: auto
    top: 0 
    bottom: 0
  width: $width

.main
  padding:
    top: $gap
    bottom: $gap
    right: 0
    left: 0

.wrapper
  height: auto !important
  min-height: 100%
  margin: 0 auto (-$footerh - 1px)

.push
  height: $footerh

footer
  padding:
    top: $gap2
    bottom: $gap2
  height: $footerh - 2 * $gap2
  background-color: $c2l
  border-top: solid $c2ll 1px
  text-align: right
  font:
    size: 12px
  &, a, a:visited
    color: $c2d
  a:hover
    color: $c2
  a
    text-decoration: none
  #admin
    float: left

#login
  background-color: $c1l
  border: solid $c1lm 1px
  width: 400px
  //height:250px
  margin: 50px auto 50px
  border-radius: $bradius
  padding: 10px
  text-align: right
  input[type=text], input[type=password]
    width: 180px
    margin: 5px
  label
    margin: 5px
    width: 108px

#top
  padding:
    left: $cat + $gap + 1px
    //right: 6px
  margin:
    bottom: $gap
  .welcome
    display: inline-block
    //width: 200px
  #search
    display: inline-block
    input[type=search]
      width: 288px
  .menu
    padding:
      top: 4px
      //bottom: 4px
    display: inline-block
    max-height: 19px
    float: right
    a
      margin:
        left: 10px

#cat
  display: inline-block
  width: $cat
  text:
    align: right
  margin:
    top: $tgap + 1px
  ul, li
    width: 100%
    padding: 0
  button
    font:
      size: 14px
  li
    margin:
      bottom: 8px
    list-style: none
  #addcat
    input, button
      display: inline-block
      background: none
      border: none
      padding: $tgap
      margin: 0
      text:
        align: right
    input
      width: $cat - 15px - 2 * $tgap
    button
      width: 15px
      padding:
        right: 0

#home
  display: inline-block
  background-color: $c1l
  border: solid $c1lm 1px
    radius: $bradius
  vertical-align: top
  width: $width - $cat - $gap - 2px
  min-height: 300px
  margin:
    left: $gap
  nav
    ul
      padding: 0
      display: inline-block
      float: right
    li
      list-style: none
      display: table-cell
      padding:
        left: $gap
    &#controls
      padding: 4px
      .active
        font:
          weight: bold
      .off a
        color: $c2
  .form
    fieldset
      display: table-cell
      width: 50%
      margin: 0
      padding: 0
      vertical:
        align: top
    label
      width: 140px
    label, input, select, textarea
      margin: 5px
    input#valunit, input#valtotal, input[type=number]
      text:
        align: right

#list
  min-height: 14 * ($tfs + 4 * $tgap)
  table
    border: none
      collapse: collapse
    width: 100%
  form
    float: right
    width: 100%
  .inplace_field
    //&, &:hover, &:active
    border: 0
    padding: 1px
    width: 100%
    background: transparent
    font:
      size: $tfs
    text:
      align: right
    line:
      height: $tfs
  tr:nth-child(even)
    background-color: $c2lm
  td, th
    padding: $tgap
    height: $tfs + 2 * $tgap
    line:
      height: $tfs
    text:
      align: right
    font:
      size: $tfs
      weight: normal
  th.material, td.material
    &, input, textarea
      text:
        align: left
  th.entrada, th.valunit, th.valtotal
    width: 100px
  th.date
    width: 68px
  th.submit, td.submit
    &, button
      width: 25px
      height: 100%
      vertical-align: middle
  td
    span
      max-height: $tfs + 2 * $tgap
      text:
        overflow: hidden
